<template>
  <!--学习-->
  <div class="admin-web-conclusion-list">
    <br>
    <el-tabs class="w-el-tabs" value="0" @tab-click="topBarClick">
      <el-tab-pane label="全部" name="0"/>
      <el-tab-pane v-for="(v) in typeArr" :key="v" :label="v"/>
    </el-tabs>
    <div class="search-box">
      <el-input
        v-model="search.key"
        size="small"
        placeholder="请输入内容"
        class="search-input"
        @keyup.enter.native="searckBtnClick"
        clearable
      >
        <el-select slot="prepend" v-model="search.type" style="width: 75px" placeholder="所有">
          <el-option label="所有" value="0"/>
          <el-option label="标题" value="1"/>
          <el-option label="描述" value="2"/>
          <el-option label="内容" value="3"/>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searckBtnClick"/>
      </el-input>
    </div>
    <!--列表数据-->
    <w-cell v-for="(v, k) in loadListModel.dataArr" :item="v" :key="k" @reload="reloadData"/>
    <!--底部加载更多-->
    <w-load-more
      :loadType="loadListModel.loadType"
      @loadMore="loadData"
    />
  </div>
</template>

<script lang="ts">
import StudyModel from "@/models/StudyModel";
import YBListLoad from "@/models/YBListLoad";
import WLoadMore from "@/components/pc/loadMore/index.vue";
import WCell from "./cell.vue";
import { Component, Vue } from "vue-property-decorator";
import API from '@/api/apis'

interface OtherDataType {
  type: string
  searchType?: string
  searchKey?: string
}

@Component({
  components: {
    WLoadMore,
    WCell
  }
})

export default class WebConclusion extends Vue {
  private loadListModel = new YBListLoad<OtherDataType>(StudyModel, API.study.all, { type: "" });
  // 查找对象
  search = {
    key: '',
    type: "0"
  };
  // 类型数组
  typeArr: string[] = [];

  mounted() {
    this.getTypeArr();
  }

  // 获取类型数组
  getTypeArr() {
    StudyModel.typeDistinct()
      .then((dataArr: any) => {
        this.typeArr = dataArr;
      })
      .catch(() => {});
  }

  // 顶部导航栏点击
  topBarClick(e: { label: string }) {
    const key = e.label === "全部" ? "" : e.label;
    this.loadListModel.otherData.type = key;
    this.reloadData();
  }

  // 重新加载数据
  reloadData() {
    this.loadListModel.clearData();
    this.loadData();
  }

  // 加载列表数据
  loadData() {
    this.loadListModel
      .loadData()
      .then(() => {})
      .catch(() => {});
  }

  // 查找按钮点击
  searckBtnClick() {
    this.loadListModel.otherData.searchType = this.search.type;
    this.loadListModel.otherData.searchKey = this.search.key;
    this.reloadData();
  }
}
</script>

<style lang="scss" scoped>
.admin-web-conclusion-list {
  .search-box {
    position: absolute;
    top: 20px;
    right: 0;
  }
}
</style>

